<script setup>
import { ref} from 'vue'
import {Folder, PictureRounded, Scissor} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";

//信息展示功能
// 消息数组
const messages = ref([])
// 新消息内容
const newMessage = ref('')
// 当前用户名（可以改成动态获取）
const username = ref('李杭杭')
const activeName = ref('1')
// 发送消息
const sendMessage = () => {

    const newMsg = {
        username: username.value,
        content: newMessage.value.trim(),
        timestamp: new Date()
    }
    if(newMsg.content === ""){
        ElMessage.warning("输入内容不能为空！")
        return
    }
    messages.value.push(newMsg)
    newMessage.value = '' // 清空输入框
}

// 格式化时间显示
const formatTime = (date) => {
    return date.toLocaleTimeString('zh-CN', {
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
    })
}
//成员数组
const groups = ref([
    [
        {
            name:'王靖',
            rose:'组长'
        },
        {
            name:'李杭杭',
            rose:'组员'
        },
        {
            name:'罗展鹏',
            rose:'组员'
        },
        {
            name: '袁致豪',
            rose:'组员'
        },
        {
            name: "姜可鑫",
            rose:'组员'
        }
    ],
    [
        {
            name:'王靖',
            rose:'组长'
        },
        {
            name:'李杭杭',
            rose:'组员'
        },
        {
            name:'罗展鹏',
            rose:'组员'
        },
        {
            name: '袁致豪',
            rose:'组员'
        },
        {
            name: "姜可鑫",
            rose:'组员'
        }
    ],
    [
        {
            name:'王靖',
            rose:'组长'
        },
        {
            name:'李杭杭',
            rose:'组员'
        },
        {
            name:'罗展鹏',
            rose:'组员'
        },
        {
            name: '袁致豪',
            rose:'组员'
        },
        {
            name: "姜可鑫",
            rose:'组员'
        }
    ],
    [
        {
            name:'王靖',
            rose:'组长'
        },
        {
            name:'李杭杭',
            rose:'组员'
        },
        {
            name:'罗展鹏',
            rose:'组员'
        },
        {
            name: '袁致豪',
            rose:'组员'
        },
        {
            name: "姜可鑫",
            rose:'组员'
        }
    ],

])

</script>

<template>
    <div class="common-layout">
        <el-container >
            <el-main style="display: flex; flex-direction: column; padding: 0;">
                <!-- 消息展示区 -->
                <div class="message-container">
                    <div class="message-list">
                        <div
                            v-for="(message, index) in messages"
                            :key="index"
                            class="message-item"
                        >
                            <div class="meta-info">
                                <div class="meta-left">
                                    <span class="username">{{ message.username }}</span>
                                    <span class="time">{{ formatTime(message.timestamp) }}</span>
                                </div>
                            </div>
                            <div class="content">{{ message.content }}</div>
                        </div>
                    </div>
                </div>

                <!-- 固定输入区 -->
                <div class="input-container">
                    <div class="input-wrapper">
                        <div class="icon-group">
                            <el-icon size="30"><PictureRounded /></el-icon>&ensp;&ensp;
                            <el-icon size="30"><Folder /></el-icon>&ensp;&ensp;
                            <el-icon size="30"><Scissor /></el-icon>
                        </div>
                        <el-input
                            v-model="newMessage"
                            class="message-input"
                            :rows="4"
                            type="textarea"
                            placeholder="请输入内容,按回车发送"
                            @keyup.enter="sendMessage"
                        />
                    </div>
                </div>
            </el-main>
            <el-aside width="200px">
                <h2 align="center">小组列表</h2>

                <div class="demo-collapse">
                    <div class="scrollbar-demo-item">任课教师：李向阳</div>
                    <el-collapse v-model="activeName" accordion>
                        <el-collapse-item title="第一小组" name="1">
                            <el-scrollbar max-height="400px" height="200">
                                <p v-for="item in groups[0]" :key="item" class="scrollbar-demo-item">{{ item.name }}&ensp;&ensp;职位：{{item.rose}}</p>
                            </el-scrollbar>
                        </el-collapse-item>
                        <el-collapse-item title="第二小组" name="2">
                            <el-scrollbar max-height="400px" height="200">
                                <p v-for="item in groups[1]" :key="item" class="scrollbar-demo-item">{{ item.name }}&ensp;&ensp;职位：{{item.rose}}</p>
                            </el-scrollbar>
                        </el-collapse-item>
                        <el-collapse-item title="第三小组" name="3">
                            <el-scrollbar max-height="400px" height="200">
                                <p v-for="item in groups[2]" :key="item" class="scrollbar-demo-item">{{ item.name }}&ensp;&ensp;职位：{{item.rose}}</p>
                            </el-scrollbar>
                        </el-collapse-item>
                        <el-collapse-item title="第四小组" name="4">
                            <el-scrollbar max-height="400px" height="200">
                                <p v-for="item in groups[3]" :key="item" class="scrollbar-demo-item">{{ item.name }}&ensp;&ensp;职位：{{item.rose}}</p>
                            </el-scrollbar>
                        </el-collapse-item>
                    </el-collapse>
                </div>


            </el-aside>
        </el-container>
    </div>
</template>

<style scoped>
/* 整体布局 */
.common-layout {
    height: 100vh;
    overflow: hidden;
    display: flex;
}

/* 消息容器 */
.message-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.message-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    border-bottom: 1px solid #ebeef5;
    height: calc(100vh - 33vh); /* 动态计算高度 */
}

/* 输入容器 */
.input-container {
    height: 33vh;
    min-height: 200px;
    flex-shrink: 0;
    padding: 16px;
    border-top: 1px solid #ebeef5;
    background: #fff;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.05);
}

.input-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.message-input {
    flex: 1;
    min-height: 120px;
}

/* 消息项样式 */
.message-item {
    margin-bottom: 16px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 6px;
}

.meta-info {
    margin-bottom: 8px;
}

.username {
    font-weight: 600;
    margin-right: 12px;
}

.time {
    color: #909399;
    font-size: 0.85em;
}

.content {
    color: #303133;
    line-height: 1.6;
}

/* 按钮样式 */
.el-button {
    margin-top: 12px;
    width: 120px;
    align-self: flex-end;
}

.scrollbar-demo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
}
</style>
